<template>
  <div class="login-container">
    <div class="header">
      <h1>超市管理系统</h1>
    </div>
    <div class="form">
      <div class="title" style="font-weight: bold;">欢迎回来</div>
      <div class="subtitle">登录账号</div>
      <div class="inputf">
        <input type="text" placeholder="员工号" />
        <span class="label">员工编号</span>
      </div>
      <div class="inputf">
        <input type="password" placeholder="密码" />
        <span class="label">密码</span>
      </div>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script setup>
//import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {ElMessage} from "element-plus";
// const employeeNumber = ref('');
// const password = ref('');
const router = useRouter();

const login = async () => {
  // try {
  //   // 发送请求并接收响应
  //   const response = await axios.post('', {
  //     employeeNumber: employeeNumber.value,
  //     password: password.value,
  //   });
  //   // 打印响应数据用于调试
  //   console.log('response:', response);
  //
  //   if (response.success) {
  //     // 登录成功，跳转到主页
  //     ElMessage.success("登录成功")
  //     router.push('/home');
  //   } else {
  //     // 登录失败，显示错误信息
  //     alert('员工编号或密码错误');
  //   }
  // } catch (error) {
  //   console.error('登录失败:', error);
  //   alert('登录失败，请稍后再试');
  // }
  ElMessage.success("登录成功")
  router.push('/home');
};
</script>

<style lang="scss">
.login-container {
  width: 100%;
  min-height: 100vh; /* 设置最小高度为视口高度的100%*/
  display: flex; /* 使用flex布局 */
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  align-items: center;
  background: url("../../pictures/Managementbac.jpg") center center fixed;
  background-size: cover;

  .header {
    width: 100%;
    text-align: center; /* 文本居中对齐 */
    margin-bottom: 20px;
    h1 {
      font-size: 40px; /* 设置字体大小为40px */
      color: black; /* 字体颜色为黑色 */
      font-weight: bold; /* 字体加粗 */
    }
  }

  .form {
    width: 700px; /* 宽度700px */
    height: 400px; /* 高度400px */
    background-color: rgba(255, 255, 255, 0.4); /* 背景颜色为半透明白色 */
    backdrop-filter: blur(7px);
    border-radius: 10px; /* 边框圆角半径10px */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 边框宽度1px，颜色为半透明白色 */
    padding: 40px 60px; /* 内边距，上下40px，左右60px */
    box-shadow: rgba(50, 50, 93, 0.25) 50px 50px 100px -20px, /* 阴影效果，设置多个阴影 */
                rgba(0, 0, 0, 0.5) 30px 30px 60px -30px,
                rgba(212, 217, 222, 0.35) 2px -2px 6px -0px insert;
    display: flex; /* 使用flex布局 */
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 水平居中内容 */

    .title {
      font-size: 25px;
      color: black;
      letter-spacing: 1px;
      font-weight: 300;
      margin-bottom: 35px;
    }
    .subtitle {
      font-size: 14px;
      color: black;
      letter-spacing: 1px;
      margin-bottom: 35px;
    }
    .inputf {
      margin-bottom: 35px; /* 下边距35px，增加与下方内容的间距 */
    }

    .inputf {
      width: 60%;
      position: relative;
      input {
        width: 100%; /* 宽度100%，充满父容器 */
        height: 40px;
        border: none;
        outline: 1.5px solid rgba(200, 200, 200); /* 设置聚焦时的边框样式 */
        background-color: whitesmoke; /* 背景颜色为灰白色 */
        border-radius: 10px;
        font-size: 15px; /* 字体大小15px */
        padding: 0 15px;
        color: black; /* 字体颜色为黑色 */
        &::placeholder {
          color: rgba(175, 180, 190); /* 占位符颜色为浅灰色 */
        }
        &:focus {
          outline: 1.5px solid rgba(224, 229, 240); /* 聚焦时边框颜色变化 */
          &::placeholder {
            opacity: 0; /* 聚焦时占位符透明 */
          }
          & + .label {
            opacity: 1; /* 聚焦时标签不透明 */
            top: -20px; /* 聚焦时标签上移 */
          }
        }
        &:not(:placeholder-shown) + .label,
        &:focus + .label {
          opacity: 1; /* 输入内容或聚焦时标签不透明 */
          top: -20px; /* 输入内容或聚焦时标签上移 */
        }
      }
      .label {
        position: absolute; /* 设置定位为绝对定位 */
        top: 0; /* 顶部对齐 */
        left: 0;
        color: black;
        font-size: 13px;
        font-weight: bold; /* 字体加粗 */
        transition: 0.25s ease-out; /* 过渡效果，持续0.25秒 */
        opacity: 0;
      }
    }
    button {
      width: 90px;
      height: 45px;
      background: white; /* 背景颜色为白色 */
      border: none;
      outline: none;
      border-radius: 5px;
      font-weight: bold;
      font-size: 15px; /* 字体大小15px */
      cursor: pointer; /* 鼠标悬停时显示为手型 */
      transition: transform 0.1s ease-out; /* 过渡效果，持续0.1秒 */
    }
    button:active {
      transform: translateY(2px); /* 按钮被按下时向下移动2px */
    }
  }
}
</style>
